<template>
  <div>
    <div class="login-box">
      <div class="title">登录</div>
      <div class="photoimg"><img src="../assets/img/photoimg.jpg" alt=""></div>
      <van-form @submit="onSubmit">
        <van-field
            v-model="form.username"
            name="用户名"
            class="iconfont icon-yonghu"
            placeholder="请输入账号(手机号/微信)"
            @keyup="user"
        >
          <template #button>
            <span class="iconfont icon-cuowuguanbiquxiao-yuankuang" style="color:#c7c7c7" v-show="cancelFlag1"
                  @click="cancelUser"></span>
          </template>
        </van-field>
        <van-field
            v-model="form.password"
            type="password"
            name="密码"
            class="iconfont icon-mima"
            placeholder="请输入密码"
            @keyup="pass"
        >
          <template #button>
            <span class="iconfont icon-cuowuguanbiquxiao-yuankuang" style="color:#c7c7c7" v-show="cancelFlag2"
                  @click="cancelPass"></span>
          </template>
        </van-field>
        <div class="identfying">
          <div class="item img"><img :src="captchaImage" alt="" @click="captcha"></div>
          <div class="item"><input class="ipt" type="text" placeholder="请输入计算结果" v-model="form.captcha"></div>
        </div>
        <div class="forgetpws">
          <div>点击图片刷新验证码</div>
          <router-link tag="div" to="/forgetPassword">忘记密码</router-link>
        </div>
        <div style="margin: 16px auto;width: 360px">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>

  </div>

</template>
<script>


import comApi from '@/api/comapi'
import userApi from '@/api/user'

export default {
  data() {
    return {
      form: {
        captcha: '',
        key: '',
        password: '',
        username: ''
      },
      sms: "",
      cancelFlag1: false,
      cancelFlag2: false,
      captchaImage: ''
    }
  },
  created() {
    this.captcha();
  },
  methods: {
    captcha() {
      comApi.getCaptcha().then(res => {
        this.captchaImage = res.data.captchaImage
        this.form.key = res.data.key
      })
    },

    user() {
      if (this.username != '') {
        this.cancelFlag1 = true
      } else {
        this.cancelFlag1 = false
      }
    },
    pass() {
      if (this.password != '') {
        this.cancelFlag2 = true
      } else {
        this.cancelFlag2 = false
      }
    },
    cancelUser() {
      this.form.username = ''
      this.cancelFlag1 = false
    },
    cancelPass() {
      this.form.password = ''
      this.cancelFlag2 = false
    },

    onSubmit() {

      userApi.login(this.form).then(res => {
        this.$cookie.set("Authorization", res.data.Authorization)
        this.$cookie.set("userId", res.data.id)
        this.$router.push({path: '/index'})

      })


    },
  },
}
</script>
<style lang="less" scoped>
.login-box {
  text-align: center;
  color: #050505;

  .title {
    font-size: 26px;
    font-weight: bold;
    margin: 35px auto;
    margin-top: 0px;
    padding-top: 35px;
  }
}

.photoimg {
  width: 140px;
  height: 140px;
  margin: 25px auto;

  img {
    width: 100%;
    height: 100%;
  }
}

.van-field__button {
  .van-button {
    border: 1px solid #c1d2fc !important;
    color: #2d6cfe !important;
  }
}

.van-cell {
  width: 360px !important;
  margin: 0 auto;
  display: flex;
  background: #ededed;
  border-radius: 25px;
  border-bottom: none;
  margin-bottom: 15px;
  color: #d77793;

  .van-field__control {
    color: black;
    padding-left: 10px;
  }
}

.van-button--info {
  background: #f8f5be;
  border: #f8f5be;
  font-size: 18px;
  font-weight: bold;
  color: black;

}

.identfying {
  width: 360px;
  margin: 0 auto;
  margin-bottom: 15px;
  border-radius: 25px;
  background: #ededed;
  display: flex;
  justify-content: space-between;
  overflow: hidden;

  .item {
    flex: 1;
    height: 44px;
  }

  .img {
    height: 100%;
  }

  .ipt {
    height: 100%;
    text-indent: 20px;
    border: none;
    background: #ededed;
  }
}

.forgetpws {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #596c94;
  width: 360px;
  margin: 0 auto;
  margin-bottom: 40px;
}


input::input-placeholder {
  color: #828386;
}

input::-webkit-input-placeholder { //兼容WebKit browsers（Chrome的内核）
  color: #828386;
}

input::-moz-placeholder { //Mozilla Firefox 4 to 18
  color: #828386;
}

input::-moz-placeholder { //Mozilla Firefox 19+
  color: #828386;
}

input::-ms-input-placeholder { //Internet Explorer 10+
  color: #828386;
}
</style>
